<template>

  <div class="dashboard-editor-container">
    <!--<github-corner class="github-corner" />-->
<el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>全面统计</el-breadcrumb-item>
    </el-breadcrumb>
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <sex-chart />
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <age-chart />
        </div>
      </el-col> -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
<!--
    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import SexChart from './components/SexChart'
// import AgeChart from './components/AgeChart'
import LineChart from './components/LineChart'
import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

var lineChartData = {
  user: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    expected: '新用户',
    actual: '登录用户'
  },
  post: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    expected: '新用户',
    actual: '登录用户'
  },
  comment: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    expected: '新用户',
    actual: '登录用户'
  },
  report: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    expected: '新用户',
    actual: '登录用户'
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    // GithubCorner,
    PanelGroup,
    SexChart,
    LineChart,
    // AgeChart,
    BarChart
    // TransactionTable,
    // TodoList,
    // BoxCard
  },
  data () {
    return {
      lineChartData: lineChartData.user
    }
  },
  methods: {
    async getLineCharts () {
      const { data: res } = await this.$axios.get('admin/getlinechartsdata')
      lineChartData = res.data
      this.lineChartData = lineChartData.user
    },
    handleSetLineChartData (type) {
      this.lineChartData = lineChartData[type]
    }
  },
  created () {
    this.getLineCharts()
    // lineChartData = {
    //   user: {
    //     expectedData: [5644, 192, 120, 144, 160, 130, 140],
    //     actualData: [5465, 160, 151, 106, 145, 150, 130],
    //     expected: '新用户',
    //     actual: '登录用户'
    //   },
    //   post: {
    //     expectedData: [4564, 123, 120, 144, 160, 130, 140],
    //     actualData: [31, 160, 151, 106, 145, 150, 130],
    //     expected: '新用户',
    //     actual: '登录用户'
    //   },
    //   comment: {
    //     expectedData: [7867, 192, 120, 144, 160, 130, 140],
    //     actualData: [343, 160, 151, 106, 145, 150, 130],
    //     expected: '新用户',
    //     actual: '登录用户'
    //   },
    //   report: {
    //     expectedData: [1313, 132, 120, 144, 160, 130, 140],
    //     actualData: [180, 160, 151, 106, 145, 150, 130],
    //     expected: '新用户',
    //     actual: '登录用户'
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
padding: 20px;
  background-color: #f6f6f6;
  position: relative;
  margin: -20px 0 0 -10px;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
